<template>
	<view>
		<view class="page">
			<view class="user-card" style="background-image: url(../../static/images/inspect/user-bg.png);">
				<view class="user-card__head">
					<view class="user-card__bed">+3床</view>
					<image src="../../static/images/inspect/bed.png" class="user-card__icon" mode=""></image>
				</view>
				<view class="user-card__body flex_bd">
					<view class="user-card__name">
						张麻子 <text class="user-card__number">住院号：007</text>
					</view>
					<view class="user-card__info">
						<view class="user-card__sex">
							性别：保密
						</view>
						<view class="user-card__time">
							日期：2021-05-31 09:22:06
						</view>
					</view>
				</view>
			</view>
			<view class="u-collapse">
				<view class="u-collapse-item" :class="{open:item.open == true}" :index="index"
					v-for="(item, index) in itemList" :key="index">
					<view class="collapse-head">
						<view class="collapse-flex">
							<view class="collapse-title">
								{{item.head}}
							</view>
							<button type="default" class="upload-btn">{{item.upload}}</button>
						</view>
						<view class="collapse-flex">
							<view class="collapse-time">
								<text class="collapse-label">{{item.label}}</text>{{item.time}}
							</view>
							<button type="default" class="open-btn" @click="handClick(item)">{{item.openTxt}}
								<u-icon name="arrow-right"></u-icon>
							</button>
						</view>
					</view>
					<view class="collapse-item">
						<view class="collapse-body" v-if="item.show">
							<div class="collapse-cell">
								<u-input v-model="select" type="text" :border="true" @click="show = true"
									placeholder="请选择异常情况" />
							</div>
							<div class="collapse-cell">
								<u-upload :action="action" :file-list="fileList" width="145" height="145"
									:custom-btn="true">
									<view slot="addBtn">
										<view class="addBtn">
											<u-icon name="photo" size="32" color="#a09fa8"></u-icon>
											<view class="addBtn-tips">选择图片</view>
										</view>
									</view>
								</u-upload>
							</div>
							<view class="collapse-cell">
								<view class="collapse-cell__hd">备注</view>
								<view class="collapse-cell__bd" style="height: 50rpx;">
									<u-input v-model="value" placeholder="请输入备注信息..." type="textarea" :height="50"
										:auto-height="true" />
								</view>

							</view>
						</view>
						<view class="collapse-body" v-else-if="item.show1">
							<view class="collapse-subtxt">附属物信息</view>
							<view class="collapse-flex">
								<view class="collapse-title">
									{{item.subTxt}}(附)
								</view>
								<button type="default" class="upload-btn">{{item.subupload}}</button>
							</view>
							<view class="collapse-flex">
								<view class="collapse-time">
									<text class="collapse-label">{{item.label}}</text>{{item.time}}
								</view>
							</view>
						</view>
						<view class="collapse-body" v-else>
							<view class="collapse-subtxt">附属物信息</view>
							<view class="collapse-flex">
								<view class="collapse-title">
									{{item.subTxt}}(附)
								</view>
								<button type="default" class="upload-btn">{{item.subupload}}</button>
							</view>
							<view class="collapse-flex">
								<view class="collapse-time">
									<text class="collapse-label">{{item.label}}</text>{{item.time}}
								</view>
							</view>
							<div class="collapse-cell">
								<u-input v-model="select" type="text" :border="true" @click="show = true"
									placeholder="请选择异常情况" />
							</div>
							<div class="collapse-cell">
								<u-upload :action="action" :file-list="fileList" width="145" height="145"
									:custom-btn="true">
									<view slot="addBtn">
										<view class="addBtn">
											<u-icon name="photo" size="32" color="#a09fa8"></u-icon>
											<view class="addBtn-tips">选择图片</view>
										</view>
									</view>
								</u-upload>
							</div>
							<view class="collapse-cell">
								<view class="collapse-cell__hd">备注</view>
								<view class="collapse-cell__bd" style="height: 50rpx;">
									<u-input v-model="value" placeholder="请输入备注信息..." type="textarea" :height="50"
										:auto-height="true" />
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="30">
			<view class="popup-head">
				<button type="default" class="btn cancel-btn" @click="cancel">取消</button>
				<view class="popup-title flex_bd">导管异常状态</view>
				<button type="default" class="btn confirm-btn" @click="confirm">确认</button>
			</view>
			<view class="popup-body">
				<u-radio-group v-model="radio" width="100%">
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index"
						:name="item.name" label-size="30" active-color="#00a4e8" :label-disabled="false"
						:class="{active:ischecK == item.name}">
						<text :class="{label:ischecK == item.name}">{{item.name}}</text>
					</u-radio>
				</u-radio-group>
			</view>

		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemList: [{
					head: "吸氧管",
					upload: "上传异常",
					label: '有效期',
					time: "2021-05-31 09:22:06",
					openTxt: '展开',
					show: true,
					open: false,
				}, {
					head: "呼吸机管路",
					upload: "取消",
					label: '有效期',
					time: "2021-05-31 09:22:06",
					openTxt: '收起',
					show: true,
					open: true,
				}, {
					head: "动脉导管",
					upload: "上传异常",
					label: '到期',
					time: "2021-05-31 09:22:06",
					openTxt: '收起',
					subTxt: '辅料贴',
					subupload: '上传异常',
					show1: true,
					open: true,
				}, {
					head: "动脉导管",
					upload: "上传异常",
					label: '有效期',
					time: "2021-05-31 09:22:06",
					openTxt: '收起',
					subTxt: '辅料贴',
					subupload: '上传异常',
					open: true,
				}],
				value: '',
				select: '',
				show: false,
				list: [{
						name: '穿刺口发红更换敷料',
						ischecK: true,
					},
					{
						name: '穿刺口渗血更换敷料',
						ischecK: false,
					},
					{
						name: '敷料到期更换',
						ischecK: false,
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radio: '穿刺口发红更换敷料',
				ischecK:'穿刺口发红更换敷料'
			}
		},
		onLoad() {

		},
		methods: {
			actionSheetCallback(index) {
				this.select = this.actionSheetList[index].text;
			},
			handClick(item) {
				if (item.open == true) {
					item.open = false;
					item.openTxt = "展开";
				} else {
					item.open = true;
					item.openTxt = "收起";
				}
				console.log(item)
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				this.radio = e;
				this.ischecK = e;
			},
			cancel(){
				this.show = false
			},
			confirm(){
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
	.page {
		padding: 0 30rpx;
	}

	.user-card {
		height: 190rpx;
		background-position: left top;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border-radius: 30rpx;
		overflow: hidden;
		padding: 35rpx 30rpx;
		display: flex;
		align-items: center;
		margin-bottom: 36rpx;
		box-shadow: 0 8rpx 20rpx rgba(40, 179, 237, 0.2);

		.user-card__head {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background-color: #fff;
			margin-right: 25rpx;
			padding-top: 15rpx;

			.user-card__bed {
				text-align: center;
				font-size: 26rpx;
				color: #373b4f;
				line-height: 46rpx;
			}

			.user-card__icon {
				width: 44rpx;
				height: 38rpx;
				display: block;
				margin: 0 auto;
			}

		}

		.user-card__name {
			font-size: 32rpx;
			color: #fff;
			margin-bottom: 30rpx;

			.user-card__number {
				font-size: 20rpx;
				margin-left: 20rpx;
			}
		}

		.user-card__info {
			font-size: 24rpx;
			color: #ffffff;
			line-height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.u-collapse-item {
		border-radius: 12rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.collapse-head {
		background-color: #e8f1f7;
		border-radius: 12rpx 12rpx 0 0;
		padding: 20rpx 16rpx 22rpx 30rpx;
	}

	.collapse-flex {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.collapse-title {
			font-size: 30rpx;
			color: #373b4f;
			line-height: 48rpx;
		}

		.upload-btn {
			font-size: 26rpx;
			color: #f84949;
			padding: 6rpx 20rpx;
			line-height: 36rpx;
			margin: 0;
		}

		.upload-btn::after {
			border-color: #f84949;
		}

		.open-btn {
			height: 40rpx;
			padding: 0;
			margin: 0;
			font-size: 24rpx;
			color: #a09fa8;
			line-height: 40rpx;
			background-color: transparent;
		}

		.open-btn::after {
			display: none;
		}

		.collapse-time {
			font-size: 24rpx;
			line-height: 40rpx;
			color: #788690;

			.collapse-label {
				color: #a09fa8;
				margin-right: 16rpx;
			}
		}
	}

	.collapse-flex:last-child {
		margin-bottom: 0;
	}

	.addBtn {
		border: 1rpx solid #cdd9e2;
		border-radius: 4rpx;
		width: 145rpx;
		height: 145rpx;
		padding: 30rpx 20rpx;
		text-align: center;

		.addBtn-tips {
			font-size: 24rpx;
			line-height: 40rpx;
			color: #a09fa8;
		}
	}

	.collapse-body {
		background-color: #fff;
		padding: 30rpx 20rpx;
		box-shadow: 0 6rpx 16rpx rgba(211, 214, 220, 0.35);
		border-radius: 0 0 12rpx 12rpx;
	}

	.collapse-cell {
		margin-bottom: 20rpx;

		.collapse-cell__hd {
			font-size: 28rpx;
			line-height: 36rpx;
			color: #333333;
		}
	}

	.collapse-cell:last-child {
		margin-bottom: 0;
	}

	.collapse-subtxt {
		position: relative;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #a09fa8;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.collapse-subtxt::before {
		width: 230rpx;
		position: absolute;
		content: '';
		height: 1rpx;
		border-top: 1rpx dashed #bed7e7;
		left: 0;
		top: 50%;
	}

	.collapse-subtxt::after {
		width: 230rpx;
		position: absolute;
		content: '';
		height: 1rpx;
		border-top: 1rpx dashed #bed7e7;
		right: 0;
		top: 50%;
	}

	.collapse-item {
		display: none;
	}

	.u-collapse-item.open .collapse-item {
		display: block;
	}

	.popup-head {
		position: relative;
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #EEEEEE;

		.popup-title {
			font-size: 34rpx;
			line-height: 40rpx;
			text-align: center;
			margin: 0 60rpx;
			color: #333333;

		}

		.btn {
			padding: 0;
			margin: 0;
			line-height: 40rpx;
			font-size: 30rpx;
			color: #999999;
			background-color: transparent;
		}

		.btn::after {
			display: none;
		}

		.confirm-btn {
			color: #00a4e8;
		}
	}

	.popup-body {
		padding: 44rpx 30rpx;

		.u-radio-group {
			display: block;
		}
		

		.u-radio {
			display: flex;
			width: 100%;
			justify-content: space-between;
			flex-direction: row-reverse;
			padding: 0 40rpx 0 30rpx;
			margin-bottom: 25rpx;
			height: 78rpx;
			border: 1rpx solid #e5e5e5;
			border-radius: 12rpx;
		}

		.u-radio.active {
			border-color: #00a4e8;
			color: #00a4e8;
			background-color: rgba(0, 164, 232, 0.1);
		}

		.label {
			color: #00a4e8;
		}
	}
</style>
